import React from 'react'
import {withRouter,Link} from 'react-router-dom'
import NavBar from '../../components/navBar/navBar'
import './map.scss'
import axios from '../../utils/axios'
import {Toast,Modal} from 'antd-mobile'
import HouseList  from '../../components/roomList/houseList'
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255, 0, 0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rgb(255, 255, 255)',
    textAlign: 'center'
  }
class Map extends React.Component{
    map=null
    state={
        modal:false,
        houseList:[]
    }
    componentDidMount(){
        this.initMap()


    }
    initMap=()=>{
        let map = new window.BMap.Map("container");    
        this.map=map      // 创建地图实例 
        //let point = new window.BMap.Point(100, 39.915);  // 创建点坐标 
         
        let {label,value}=JSON.parse(localStorage.getItem('local_city'))     
        let mygeo=new window.BMap.Geocoder()
        mygeo.getPoint(label,(async res=>{
            if(res){
                map.centerAndZoom(res, 11); 
                map.addControl(new window.BMap.ScaleControl());    
                map.addControl(new window.BMap.NavigationControl());  
                this.renderOverlay(value)
            }
        }),label)
    }
    getZoomType=()=>{
        let zoom =this.map.getZoom()
        let nextZoom=null,type=null
        if(zoom<12){
            nextZoom=13
            type='circle'
        }else if(zoom>=12&&zoom<14){
            nextZoom=15
            type='circle'
        }else if(zoom>=14){
            type='rect'
        }
        return {nextZoom,type}
    }
    renderOverlay=async (value)=>{
        Toast.loading('loading',0)
        let res=await axios.get('/area/map?id='+value)
        Toast.hide()
        let labelType=this.getZoomType()
        res.data.body.forEach(item=>{
            this.setLabelType(item,labelType)
        })
    }
    setLabelType=({coord,value,label,count},{nextZoom,type})=>{
        let point =new window.BMap.Point(coord.longitude,coord.latitude)
        if(type==='circle'){
            this.setCircle(point,value,label,count,nextZoom)
        }else{
            this.setRect(point,value,label,count)
        }
        
    }
    setCircle=(point,value,label,count,nextZoom)=>{
        let labels=new window.BMap.Label('',{
            position:point,
            offset:new window.BMap.Size(-10,-10)
        })
        labels.id=value
        labels.setContent(`
        <div class="circle-bubble">
            <p class="circle-name">${label}</p>
            <p>${count}套</p>
        </div>
        `)

        labels.onclick=()=>{
            this.renderOverlay(value)
            this.map.centerAndZoom(point,nextZoom)
            let t=setTimeout(() => {
                clearTimeout(t)
                this.map.clearOverlays()
            }, 0);
        }
        labels.setStyle(labelStyle)
        this.map.addOverlay(labels)
    }
    setRect=(point,value,label,count,nextZoom)=>{
       let labels=new window.BMap.Label('',{
           position:point,
           offset:new window.BMap.Size(-10,10)
       })
       labels.id=value
       labels.setContent(`
        <div class="rect-div">
            <span class="rect-housename">${label}</span>
            <span class="rect-housenum">${count}套</span>
            <i class="rect-arrow"></i>
        </div>
        `)
        labels.setStyle(labelStyle)
        labels.onclick=()=>{
            console.log(value,label)
            this.getHouseList(value)
        }
        this.map.addOverlay(labels)
    }
    getHouseList=async(id)=>{
       let res=await axios.get(`/houses?cityId=${id}`)
       console.log(res,'fangwu')
       this.setState({
         houseList:res.data.body.list,
         modal:true
       })
    }
    render(){
        let {houseList}=this.state
        return <div className='map'>
            <NavBar >地图找房</NavBar>
            <div id='container'></div>
            <Modal popup  maskClosable={true} visible={this.state.modal} 
                animationType="slide-up" onClose={e=>this.setState({modal:false})}>
                <div className='house-deat'>
                    <div className='list-head'>
                        <span className='left'>房屋列表</span>
                        <Link className='right' to='/home/find'>更多房源</Link>
                    </div>
                    <div className='list-body'>
                       {/* {houseList.map(item=>{
                           return <div className='list-item' key={item.houseCode}>
                                <img src={`http://localhost:8080${item.houseImg}`} alt="" />
                                <div className='item-right'>
                                    <p className='item-name'>{item.title}</p>
                                    <p className='item-des'>{item.desc}</p>
                                    <p className='item-tag'>
                                        {item.tags.map((tag,index)=>{
                                            return <span key={index}>{tag}</span>
                                        })}
                                    </p>
                                    <p className='item-price'>{item.price} 元/月</p>
                                </div>
                            </div>
                       })} */}
                        <HouseList houseList={houseList}></HouseList>
                    </div>
                </div>
                
            </Modal>
        </div>
    }
}

export default withRouter(Map)

// 覆盖物样式

